<template>
  <div id="header">
    <div class="container">
      <div class="left-content">
        <ul class="tab-list">
          <router-link to="/" tag="li" class="tab-item" @click="jumpHome">首页</router-link>
        </ul>
        <div class="header-title">FNIU1 的博客</div>
      </div>

      <div class="search-box" @keyup.enter="jumpSearch">
        <el-input placeholder="请输入搜索内容" v-model="serachText" suffix-icon="el-icon-search" class="search-input"> </el-input>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Header',
  data() {
    return {
      serachText: ''
    }
  },
  methods: {
    jumpSearch() {
      this.$router.push({
        name: 'Search',
        params: {
          searchText: this.serachText
        }
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
#header {
  height: 50px;
  border-bottom: 1px solid #eee;
  background: #fff;
  .container {
    position: relative;
    display: flex;
    width: 1000px;
    justify-content: space-between;
    align-content: center;
    margin: auto;
    height: 50px;
    line-height: 50px;
    font-size: 14px;

    .left-content {
      flex: 1;
      display: flex;
      justify-content: space-between;
    }
    .tab-list {
      min-width: 300px;
      .tab-item {
        position: relative;
        width: 40px;
        text-align: center;
        cursor: pointer;
      }
      .tab-item.active,
      .tab-item.router-link-exact-active {
        &:after {
          content: '';
          position: absolute;
          height: 3px;
          width: 30px;
          background: chocolate;
          left: 50%;
          bottom: 0px;
          transform: translateX(-50%);
        }
      }
    }

    .search-input {
      .el-input__inner {
        width: 283px;
        border-radius: 20px;
      }
    }

    .header-title {
      padding: 0 20px;
      text-align: center;
      font-size: 20px;
      letter-spacing: 2px;
      font-family: fantasy;
      text-shadow: 5px 5px 5px #ccc;
      margin-right: 16px;
    }
  }
}
</style>
